<template>
	<view>
		<view class="search-input">
			<uni-icons type="search" size="16"></uni-icons>
			<input type="text" v-model="searchWords" placeholder="输入搜索内容" class="ml-20" style="font-size: 24rpx;" />
			<view class="font-24 mr-20" @click="search">搜索</view>
		</view>
		<view class="text-center mt-200" v-if="lists.length === 0">暂无信息...</view>
		<view class="pt-20 pl-30 pr-30 " v-for="(item, index) in lists" :key="index"
			@click="$goRoute.goUrl('/pages/fairs/details?id='+item.id)">
			<view class="bg-white border-radius p-30 flex items-center">
				<view class="" style="width: 80vw;">
					<view class="font-26 font-no-wrap">{{item.name}}</view>
					<view class="font-24 font-grey mt-10">{{item.intro}}</view>
					<view class="flex space-between">
						<view class="font-24 font-grey mt-10">东营 · {{item.address}}</view>
						<view class="font-24 font-grey mt-10">{{item.startDate}}至{{item.endDate}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		list
	} from '../../api/job_fair.js';
	export default {
		data() {
			return {
				searchWords: '',
				pageNo: 1,
				pageSize: 10,
				lists: [],
				type: ''
			};
		},
		onLoad(options) {
			this.type = options.type
			if (options.type === '0') {
				uni.setNavigationBarTitle({
					title: '线下招聘会'
				})
			} else {
				uni.setNavigationBarTitle({
					title: '线上招聘会'
				})
			}
			this.getList()
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '河口人才招聘小程序',
				path: '/pages/fairs/fairs?type='+this.type
			}
		},
		onReachBottom() {
			this.getList()
		},
		methods: {
			search() {
				this.pageNo = 1
				this.getList()
			},
			getList() {
				uni.showLoading({
					title: '加载中'
				})
				list({
					pageSize: this.pageSize,
					pageNo: this.pageNo,
					name: this.searchWords,
					type: this.type
				}).then(res => {
					if (this.pageNo === 1) {
						this.lists = res.result.records
					} else {
						this.lists.push(...res.result.records)
					}
					this.pageNo += 1
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}

	.search-input {
		background-color: rgba(255, 255, 255, .8);
		height: 30px;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		padding: 10rpx 30rpx;
		width: 84vw;
		margin: auto;

		input {
			width: 80%;
		}
	}

	.category {
		padding: 10rpx 20rpx;
		background-color: #DDDDDD;
		border-radius: 50rpx;
		opacity: 1;
		font-size: 26rpx;
		margin-left: 30rpx;
		text-align: center;
		display: inline-block;
	}

	.selected {
		color: white;
		background-color: #46B4B1;
	}
</style>